<template>
  <div class="container">
    <div class="operate-area">
      <el-button type="primary" plain size="mini" icon="el-icon-plus" @click="addUserInfo">新增</el-button>
      <el-button type="warning" plain size="mini" icon="el-icon-download" @click="exportUserInfo">导出</el-button>
    </div>
    <div class="user-table">
      <el-table
          stripe
          :header-cell-style="{background:'#eef1f6', color:'#606266'}"
          :data="tableData"
          style="width: 100%;margin-top: 10px">
        <el-table-column
            prop="username"
            label="用户名">
        </el-table-column>
        <el-table-column
            prop="createTime"
            label="创建时间">
        </el-table-column>
        <el-table-column
            prop="updateTime"
            label="上次登录时间">
        </el-table-column>
        <el-table-column
            prop="role"
            label="权限">
          <template slot-scope="scope">
            <el-tag effect="dark" :type="roleType[scope.row.role]" size="small">{{scope.row.role}}</el-tag>
          </template>
        </el-table-column>
        <el-table-column
            label="操作">
          <template slot-scope="scope">
            <el-button @click="editUserInfo(scope.row)" type="text" size="small">编辑</el-button>
            <el-button @click="deleteUserInfo" type="text" size="small">删除</el-button>
          </template>
        </el-table-column>
      </el-table>
    </div>

    <el-dialog
        :title="dialogTitle"
        :visible.sync="showInfoDialog"
        width="30%">
      <el-form ref="form" :model="userForm" label-width="auto">
        <el-form-item label="用户名">
          <el-input v-model="userForm.username"></el-input>
        </el-form-item>
        <el-form-item label="身份">
          <el-radio-group v-model="userForm.role" size="small">
            <el-radio-button label="普通用户"></el-radio-button>
            <el-radio-button label="管理员"></el-radio-button>
          </el-radio-group>
        </el-form-item>
      </el-form>
      <span slot="footer" class="dialog-footer">
    <el-button @click="showInfoDialog = false">取 消</el-button>
    <el-button type="primary" @click="submitInfo">确 定</el-button>
  </span>
    </el-dialog>
  </div>
</template>

<script>
import {addUserInfo, deleteUserInfo, getAllUser, updateUserInfo} from "@/api/login";

export default {
  name: 'UserManagement',
  data() {
    return {
      isEdit: false,
      showInfoDialog: false,
      dialogTitle: '',
      tableData: [],
      userForm: {
        username: '',
        role: ''
      },
      roleType: {
        '普通用户': 'info',
        '管理员': 'danger'
      },
      roleText: {
        0: '普通用户',
        1: '管理员'
      },
      roleNumber: {
        '普通用户': 0,
        '管理员': 1
      }
    }
  },
  mounted() {
    this.getAllUserInfo();
  },
  methods: {
    reset() {
      this.userForm = {
        id: '',
        username: '',
        role: ''
      }
    },
    getAllUserInfo() {
      getAllUser().then(res => {
        this.tableData = res.data;
        for ( let i = 0 ; i < this.tableData.length ; i++) {
          this.tableData[i].role = this.roleText[this.tableData[i].role]
        }
      })
    },
    addUserInfo() {
      this.reset();
      this.isEdit = false;
      this.dialogTitle = '新增用户'
      this.showInfoDialog = true;
    },
    editUserInfo(row) {
      this.isEdit = true;
      this.dialogTitle = '编辑用户';
      this.showInfoDialog = true;
      this.userForm.id = row.id
      this.userForm.username = row.username
      this.userForm.role = row.role
    },
    deleteUserInfo(row) {
      this.$alert(`确定要删除用户名为${row.username}的用户吗?`, '删除用户', {
        confirmButtonText: '确定',
        showCancelButton: true,
        callback: action => {
          if (this.action === 'confirm') {
            deleteUserInfo(row.id).then(res => {
              this.$message.success('删除成功')
              this.getAllUserInfo()
            })
          }
        }
      })
    },
    exportUserInfo() {
      // 创建一个隐藏的<a>元素
      let link = document.createElement('a');
      link.style.display = 'none';
      document.body.appendChild(link);

      // 通过 Flask 的路由来获取文件路径
      link.href = 'http://yiyuy.mynatapp.cc/exportUserInfo';

      // 模拟点击事件来触发文件下载
      link.click();

      // 移除创建的<a>元素
      document.body.removeChild(link);
    },
    submitInfo() {
      if ( this.userForm.username.length <= 0 ) {
        this.$message.warning('用户名不能为空')
        return
      }

      if ( this.userForm.username.length < 5 || this.userForm.username.length > 10 ) {
        this.$message.warning('用户名长度在5~10位')
        return;
      }

      this.userForm.role = this.roleNumber[this.userForm.role]
      if ( this.isEdit ) {
        updateUserInfo(this.userForm).then(res => {
          this.$message.success('更新成功')
          this.getAllUserInfo()
          this.showInfoDialog = false;
        })
      }else {
        addUserInfo(this.userForm).then(res => {
          this.$message.success('新增成功')
          this.getAllUserInfo()
          this.showInfoDialog = false;
        })
      }
    }
  }
}
</script>

<style lang="less" scoped>
@keyframes MoveIn {
  0% {
    opacity: 0;
    transform: translateY(12px);
  }

  100% {
    opacity: 1;
    transform: translateY(0);
  }
}

.container {
  width: 100%;
  height: 100%;
  animation: MoveIn .5s cubic-bezier(.4, 0, .2, 1);

  .operate-area {
    margin-top: 15px;
  }
}
</style>